<template>
  <div class="commentDetailContainer" >
    <div class="detailContent" style="padding: 40px">
      <el-form label-width="80px">
        <el-form-item label="发布人">
          <span>{{userName}}</span>
        </el-form-item>
        <el-form-item label="发布时间">
          <span>{{ createTime }}</span>
        </el-form-item>
        <el-form-item label="文字内容">
          <div class="textContent" style="width: 600px;border: 1px solid #ccc;text-indent: 1.5rem;line-height: 40px;padding: 10px">
            <span>{{commentDesc}}</span>
          </div>
        </el-form-item>
        <el-form-item label="图片内容">
          <el-image
            style="width: 100px; height: 100px"
            :src="srcList[0]"
            :preview-src-list="srcList">
            <div slot="error" class="image-slot">
            </div>
          </el-image>
        </el-form-item>
        <el-form-item label="评论回复">
          <el-table
            border
            :data="commentReplyData"
            :header-cell-style="{textAlign: 'center',backgroundColor:'#cccccc',fontSize:'14px'}"
            :cell-style="{ textAlign: 'center' }"
            stripe
          >
            <el-table-column
              prop="replyUser.nickName"
              label="回复人"
            >
            </el-table-column>
            <el-table-column
              prop="normalUser.nickName"
              label="回复对象"
            >
            </el-table-column>
            <el-table-column
              prop="replyDesc"
              label="回复内容"
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="评论时间"
            >
            </el-table-column>
            <el-table-column
              label="操作" :render-header="renderHeader"
            >
              <template slot-scope="scope">
                <el-button type="text" plain size="mini" style="border: none;color: #FF0101" @click="delComment(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {delCommentReply, delCompassComment, getCompassComment} from '../../../../api/system/CompassDiary'

export default {
  name: 'CommentDetail',
  data() {
    return {
      userName:"",
      //评论时间
      createTime:"",
      //评论内容
      commentDesc:"",
      //图片内容
      commentImgs:"",
      commentReplyData: [],
      imgUrl: [],
      //缩略图
      srcList:[],
      imgContent:[]
    }
  },
  created() {
    this.getCommentList()
  },
  methods:{
    //获取日记评论详细信息
    getCommentList(){
      const id = this.$route.query.id;
      if(id){
        getCompassComment(id).then(res=>{
          const compassNormalUser=res.data.compassNormalUser
          this.userName=compassNormalUser.userName
          this.createTime=res.data.createTime
          this.commentDesc=res.data.commentDesc
          this.commentReplyData=res.data.diaryReplyList
          this.imgContent = res.data.fileList
          for(let imgUrl of this.imgContent){
            this.srcList.push(imgUrl.fileUrl)
          }
        })
      }
    },
    renderHeader(h) {
      return(
        <div>
          操作
          <el-button type="text" onClick={()=>this.getCommentList()} style="marginLeft:20px">重置筛选</el-button>
        </div>
      )
    },
  //  删除评论
    delComment(row){
      const ids = row.id
      this.$confirm('是否确认删除', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delCommentReply(ids)
      }).then(() => {
        this.getCommentList()
        this.commentReplyData=res.data.diaryReplyList
        this.msgSuccess('删除成功')
      }).catch(function() {
      })
    }
  }
}
</script>

<style scoped>

</style>
